<template>
	<div class="common-volume-library" v-loading.fullscreen.lock="loading"
		element-loading-text="拼命加载中">
		<div class="question-bank-h-box">

			<div class="question-bank-h-path">
				<router-link to="/test/common-library">公共卷库</router-link>
				<router-link to="/test/private-library">我的卷库</router-link>
			</div>

			<ul class="question-bank-h-type">

				<li class="question-bank-h-list">
					<span>试题类型:</span>
					<div>
						<template>
						  <el-radio-group v-model="question.type" @change="getTestList">
						  	<template v-for="item of getTestTypeList">
						  		<el-radio :label="item.id">{{item.name}}</el-radio>
						  	</template>
						  </el-radio-group>
						</template>
					</div>
				</li>

				<li class="question-bank-h-list">
					<span>题目范围:</span>
					<div class="question-area">
                        <testArea ref="testArea"></testArea>
						<el-button type="primary" @click="screenChange()">筛选</el-button>
						<el-button type="primary" plain @click="restChange()">重置</el-button>
					</div>
				</li>

			</ul>
		</div>	
		
		<div class="common-volume-library">
			
			<div class="question-bank-wp-r-h">
				<el-input
				    placeholder="搜索试卷"
				    suffix-icon="el-icon-search" 
				    v-model="question.keyword" @change="getTestList">
				  </el-input>

				  <div>
					  	<el-radio-group v-model="question.order" @change="getTestList">
					  		<el-radio label="time">最新<i class="el-icon-sort-down"></i></el-radio>
					  		<el-radio label="fav">热门<i class="el-icon-sort-down"></i></el-radio>
					  	</el-radio-group>
					</div>
			</div>

			<ul>
				<template  v-for="(item, index) of testList">
				<transition name="el-zoom-in-top">
				<li class="common-volume-ls my-common-volume" :key="index">
					<span></span>
					<div class="">
						<div class="common-volume-ls-title">
							<router-link  :to="{path: '/test/test-paper', query: {id: item.id, authority: 1}}">{{item.name}}</router-link>
							<span>更新于：{{item.update_time.substring(0, 16)}}</span>
						</div>
						<div class="common-volume-ls-tag">
							<span v-if="item.study_section">{{item.study_section}}</span>
							<span v-if="item.subject">{{item.subject}}</span>
							<span v-if="item.source">{{item.source}}</span>
							<span v-if="item.version_name">{{item.version_name}}</span>
						</div>
						<div class="common-volume-ls-op">
							<router-link :to="{path: '/test/test-paper', query: {id: item.id, authority: 1}}">预览</router-link>
							<span v-if="item.create_id != $g.user_id"  @click="operationTest(item.id)">添加到我的卷库</span>
						</div>
					</div>
				</li>
				</transition>
				</template>
			</ul>

			<div class="dependent" v-if="placeholder">
			    <i class="ipng image_state01"></i>
			    <p>还没发现任何相关的内容哦~</p>
			</div>

			<el-pagination class="test-pagination" v-show=" question.total > 10"
				@size-change="sizeChange"
				@current-change="currentChange"
				:current-page="question.page"
				:page-sizes="[10, 50, 100, 200, 300, 400]"
				:page-size="question.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="question.total">
			</el-pagination>

		</div>

	</div>
</template>

<script>
    import testArea  from  './test-area';
	export default {
		components: { 
            testArea
        },        
		data(){
			return {
				loading: true,
				placeholder: false,
				question: {
					type: 0, 		/*试题类型*/
					order: 'time',			/*列表排序*/
					keyword: '', 			/*搜索关键字*/
					page: 1,
					size: 10,
					total: 0
				},
				activeName: 'first',
				testList: [], 		/*试卷列表*/
				getTestTypeList: [],
			}
		},
		watch: {
			'$store.state.questionChange': {
				handler(val, newval){
                    this.$nextTick(()=>{
                        this.$refs.testArea.subjectData = deep_clone(this.$parent.subjectArr);
                        let subject = this.$route.query.subject ? this.$route.query.subject : sessionStorage.getItem('subjectID');
						this.$refs.testArea.ruleForm.subject = subject === '0' ? '' : +subject;
                        this.getTestList();
                    })
				},
				immediate: true
			},
		},
		created(){
            this.getTestType();
        },

		methods: {
			/**
			 * 重置数据
			 * @DateTime 2020-06-09T17:10:01+0800
			 * @qiu_m
			 * @return   {[type]}                 [description]
			 */
			restChange(){
                this.$refs.testArea.setDefault();
				this.question.page = 1
				this.getTestList()
			},
			/**
			 * 筛选
			 * @qiu_m
			 * @DateTime 2019-11-16T11:53:17+0800
			 * @return   {[type]}                 [description]
			 */
			screenChange(){
                let noSelect = Object.values(this.$refs.testArea.ruleForm).includes('');
				if (noSelect) {
					this.chapterID = [];
					this.knowledgeID = [];
				}
				this.getTestList()
			},
			/**
			 * 请求试卷列表
			 * @DateTime 2019-07-22T13:47:02+0800
			 */
			getTestList(){
				let success = ( res=>{
					this.testList = res.data.data;
					this.question.page = parseInt(res.data.page_index);
					this.question.total  = parseInt(res.data.data_sum);
                    this.loading = false;
					this.testList.length != 0 ? this.placeholder = false : this.placeholder = true;
				});

				let params = {
					// user_id: this.$g.user_id,
					page_index: this.question.page,
                    page_size: this.question.size,
                    
                    grade_id: this.$refs.testArea.ruleForm.grade,
                    subject_id: this.$refs.testArea.ruleForm.subject,
                    version_id: this.$refs.testArea.ruleForm.edition,
                    masterial_id: this.$refs.testArea.ruleForm.material,

					keyword: this.question.keyword ,
					order: this.question.order,
					source_id: this.question.type,
					authority:  1
				};

				this.$ajax({
					url: 'api/newtest/test_list',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			/**
			 * 请求试题类型数据
			 * @DateTime 2019-07-25T14:09:13+0800
			 * @return   {[type]}                 [description]
			 */
			getTestType(){

				let success = (res=>{
					this.getTestTypeList = res.data;
					if (this.getTestTypeList.length > 0) {
						this.getTestTypeList.unshift({id:0, name: '全部'})
					}
				});

				let params = {status: 1};

				this.$ajax({
					url: 'api/newtest/get_test_type',
					method: 'get',
					params: params,
					func: { success: success}
				})
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			sizeChange(val) {
				this.question.size = val
				this.getTestList()
			},
			currentChange(val) {
				document.documentElement.scrollTop = 0;
				this.question.page = val
				this.getTestList()
			},
			
			operationTest(id){
				this.$confirm('是否添加到我的卷库？', '提示', {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					type: 'warning',
					customClass: "test-message"
				}).then(() => {
					let success = (res=>{
						this.$message.success(res.msg)
					});

					let params = {id: id};

					this.$ajax.post('api/newtest/fav_test', params, {func: {success: success}})
				}).catch(() => {});
			},
		}

	}
</script>